<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      firstName: 'zhou',
      lastName: 'ziShu'
    },
    computed:{
      // 计算属性一般是没有set方法，只有get的只读属性
      fullName:{
        set:function(newValue){
          // split():可以将一个字符串拆分成一个数组
                  // 参数:需要一个字符串作为参数，会根据该字符串去拆分数组
          const names=newValue.split(' ');
          this.firstName=names[0];
          this.lastName=names[1];
        },
        get:function (){
          return this.firstName + ' ' + this.lastName
        }
      }
      // 简写
      /*fullName:function (){
        return this.firstName + ' ' + this.lastName
      }*/
    }
  })

</script>
</body>
</html>